<template>
  <div>
    <div class="crumbs">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item> <i class="el-icon-lx-cascades"></i> 推荐培训 </el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <el-row :gutter="20">
      <el-col :span="24">
        <el-row :gutter="20"
                class="mgb20">
          <el-col :span="24"
                  style="margin-left: 0px">
            <el-card shadow="hover"
                     :body-style="{ padding: '0px' }">
              <div class="grid-content grid-con-1">
                <i class="el-icon-lx-file grid-con-icon"></i>
                <div class="grid-cont-right">
                  <div>
                   <span>
                      热门推荐课程
                    </span>

                  </div>
                </div>
              </div>
            </el-card>
          </el-col>
        </el-row>
      </el-col>
    </el-row>
    <el-card class="box-card"
             v-for="item in cardData"
             :key="item.id"
             style="margin-bottom: 20px">
      <el-row :gutter="20">
        <el-col :span="6">
          <div class="grid-content bg-purple">
            <img :src="item.cover"
                 width="375"
                 height="170"
                 style="margin: auto" />
          </div>
        </el-col>
        <el-col :span="16">
          <div class="grid-content bg-purple">
            <table>
              <tr>
                课程名称：
                {{
                                    item.coursename
                                }}
              </tr>
              <tr>
                创始人：
                {{
                                    item.establisher
                                }}
              </tr>
              <tr>
                类型：
                {{
                                    item.category
                                }}

              </tr>
              <tr>
                创建时间{{
                  item.establishertime
                }}
              </tr>
            </table>
          </div>
        </el-col>
        <el-col :span="2">
          <div class="grid-content bg-purple">
            <el-button type="primary"
                       @click="goTraining(item.id)">进入课程</el-button>
          </div>
        </el-col>
      </el-row>
    </el-card>
    <div class="pagination">
      <!-- 分页组件 -->
      <Pagination v-bind:child-msg="pageparm"
                  @callFather="callFather"></Pagination>
     
    </div>
  </div>
</template>

<script>
import Schart from 'vue-schart';
import bus from '../common/bus';
import Pagination from '../../components/common/Pagination.vue';
export default {
    name: 'dashboard',
    data() {
        return {
            cardData: [],

            categoryData: [],
           
            formInline: {
                page: 1,
                limit: 5
            },
            pageparm: {
                currentPage: 1,
                pageSize: 5,
                total: 5
            },
            query: {
                cover: '',//图片
                coursename: '',//课程名字
                category: '',//类别
                establish:'',//创始人
                establishertime:''
            }
        };
    },
    // 注册组件
    components: {
        Pagination
    },
    created() {
        this.getData(this.formInline);
    },

    methods: {
        goTraining(res) {
            console.log(res);
            this.$router.push({ path: '/StudyCourse?id=' + res });
        },

        getData(parameter) {
            this.pageparm.currentPage = this.formInline.page;
            this.pageparm.pageSize = this.formInline.limit;
            this.$axios
                .post('/api/course/find/' + this.pageparm.currentPage + '/' + this.pageparm.pageSize, this.query)
                .then((res) => {
                    console.log(res);
                    this.cardData = res.data.data.list;
                    this.pageparm.total = res.data.data.total;
                })
                .catch((err) => {
                    console.log(err);
                });
        },
        // 分页插件事件
        callFather(parm) {
            //子传父 当前页和每页大小
            this.formInline.page = parm.currentPage;
            this.formInline.limit = parm.pageSize;
            this.getData(this.formInline);
        },
       
       
    }
};
</script>


<style scoped>
.handle-input {
    width: 200px;
    display: inline-block;
}
.el-row {
    margin-bottom: 20px;
}

.grid-content {
    display: flex;
    align-items: center;
    height: 150px;
}

.grid-cont-right {
    flex: 1;
    text-align: center;
    font-size: 14px;
    color: #999;
}

.grid-num {
    font-size: 30px;
    font-weight: bold;
}

.grid-con-icon {
    font-size: 50px;
    width: 150px;
    height: 150px;
    text-align: center;
    line-height: 150px;
    color: #fff;
}
.grid-con-1 .grid-con-icon {
    background: rgb(45, 140, 240);
}

.grid-con-1 .grid-num {
    color: rgb(45, 140, 240);
}

.grid-con-2 .grid-con-icon {
    background: rgb(100, 213, 114);
}

.grid-con-2 .grid-num {
    color: rgb(45, 140, 240);
}

.grid-con-3 .grid-con-icon {
    background: rgb(242, 94, 67);
}

.grid-con-3 .grid-num {
    color: rgb(242, 94, 67);
}

.user-info {
    display: flex;
    align-items: center;
    padding-bottom: 20px;
    border-bottom: 2px solid #ccc;
    margin-bottom: 20px;
}

.user-avator {
    width: 120px;
    height: 120px;
    border-radius: 50%;
}

.user-info-cont {
    padding-left: 50px;
    flex: 1;
    font-size: 14px;
    color: #999;
}

.user-info-cont div:first-child {
    font-size: 30px;
    color: #222;
}

.user-info-list {
    font-size: 14px;
    color: #999;
    line-height: 25px;
}

.user-info-list span {
    margin-left: 70px;
}

.mgb20 {
    margin-bottom: 20px;
}

.todo-item {
    font-size: 14px;
}

.todo-item-del {
    text-decoration: line-through;
    color: #999;
}

.schart {
    width: 100%;
    height: 300px;
}
</style>
